<template>
  <a-form layout="horizontal" :form="form" @submit="handleSubmit">
    <a-form-item :validate-status="userNameError() ? 'error' : ''" :help="userNameError() || ''">
      <a-input
        v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
        placeholder="Username"
      >
        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''">
      <a-input
        v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
        type="password"
        placeholder="Password"
      >
        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
        <a-row>
            <a-col :span="10">
            </a-col>
            <a-col :span="4">
                <a-button type="primary" html-type="submit" :disabled="hasErrors(form.getFieldsError())">
                    Register
                </a-button>
            </a-col>
            <a-col :span="10">
            </a-col>
        </a-row>
    </a-form-item>
  </a-form>
</template>

<script>
import axios from 'axios'
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}
export default {
  data() {
    return {
      hasErrors,
      form: this.$form.createForm(this, { name: 'horizontal_login' }),
    };
  },
  mounted() {
    this.$nextTick(() => {
      // To disabled submit button at the beginning.
      this.form.validateFields();
    });
  },
  methods: {
    // Only show error after a field is touched.
    userNameError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched('userName') && getFieldError('userName');
    },
    // Only show error after a field is touched.
    passwordError() {
      const { getFieldError, isFieldTouched } = this.form;
      return isFieldTouched('password') && getFieldError('password');
    },
    handleSubmit(e) {
      e.preventDefault();
      var that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
            var regformdata = new FormData();
            regformdata.append("loginName",'');
            regformdata.set("loginName",values["userName"].toString());
            regformdata.append("password",'');
            regformdata.set("password",values["password"].toString());
            // 注册
            axios.post('apiquerylog/register',regformdata).then((res)=>{
                if(res.data.Flag==true) {
                    this.$message.success('注册成功');
                    // 跳转父组件关闭窗口
                    that.$emit('getRegisterValue');
                }
            })
        } 
      });
    },
  },
};
</script>